<template>
  <div class="table-history">
    <div class="history-table">
      <je-table
        border
        :expand-config="{ accordion: true }"
        :data="tableData"
        stripe
        resizable
        :row-config="{ isHover: true }"
        :cell-style="cellStyle"
        show-header-overflow
        auto-resize
        :loading="loading"
        height="100%"
        header-align="center"
      >
        <je-column type="expand" width="40">
          <template #content="{ row }">
            <je-table
              stripe
              border
              :data="row.TABLETRACE_XGNRJSON"
              header-align="center"
              height="360"
            >
              <je-column
                field="tableColumnName"
                :title="$t('historyView.cnNameColumn')"
              ></je-column>
              <je-column field="tableColumnCode" :title="$t('historyView.codeColumn')"></je-column>
              <template v-if="row.TABLETRACE_OPER == '修改'">
                <je-column
                  field="tableColumnOldValue"
                  :title="$t('historyView.oldValueColumn')"
                ></je-column>
                <je-column
                  field="tableColumnValue"
                  :title="$t('historyView.newValueColumn')"
                ></je-column>
              </template>
              <template v-else>
                <je-column
                  field="tableColumnValue"
                  :title="$t('historyView.valueColumn')"
                ></je-column>
              </template>
            </je-table>
          </template>
        </je-column>
        <je-column type="seq" title="NO." width="50" align="center"></je-column>
        <je-column
          field="TABLETRACE_OPER"
          :title="$t('historyView.operationTypeColumn')"
          align="center"
          width="140"
        ></je-column>
        <je-column
          field="TABLETRACE_TABLENAME"
          :title="$t('historyView.operandColumn')"
          align="center"
          width="140"
        ></je-column>
        <je-column
          field="TABLETRACE_FIELDCODE"
          :title="$t('historyView.tableCodeColumn')"
          width="220"
        ></je-column>
        <je-column
          field="TABLETRACE_FIELDNAME"
          :title="$t('historyView.fieldname')"
          width="220"
        ></je-column>
        <je-column
          field="TABLETRACE_FIELDTYPE"
          :title="$t('historyView.fieldtype')"
          width="180"
        ></je-column>
        <je-column
          field="TABLETRACE_CZRNAME"
          :title="$t('historyView.createUseNameColumn')"
          width="100"
          align="center"
        ></je-column>
        <je-column
          align="center"
          field="TABLETRACE_CZRCODE"
          :title="$t('historyView.createUseCodeColumn')"
          width="220"
        ></je-column>
        <je-column
          field="TABLETRACE_SFYY"
          :title="$t('historyView.yesNoApplyColumn')"
          align="center"
          width="100"
        >
          <template #default="{ row }">
            {{ row.TABLETRACE_SFYY == '1' ? '是' : '否' }}
          </template>
        </je-column>
        <je-column
          field="TABLETRACE_CZSJ"
          :title="$t('historyView.createTimeColumn')"
          min-width="180"
        ></je-column>
        <template #pager>
          <je-pager
            v-model:current-page="tablePage.currentPage"
            v-model:page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            align="left"
            style="height: 40px; padding: 0 10px"
            background
            :size="size"
            :total="tablePage.totalResult"
            :layouts="['JumpNumber', 'Sizes', 'FullJump', 'Total', 'Refresh']"
            @load="onPageChange"
          />
        </template>
      </je-table>
    </div>
  </div>
</template>
<script>
  import { defineComponent, ref, onMounted, reactive, watch } from 'vue';
  import { Grid, Modal, Pager } from '@jecloud/ui';
  import { getTableHistoryData } from '../../api/index';
  import { JE_TABLE_PAGESIZES } from '@/helper/common';

  export default defineComponent({
    name: 'TableHistory',
    components: {
      JeTable: Grid,
      JeColumn: Grid.Column,
      JePager: Pager,
    },
    props: {
      tabKey: {
        type: String,
        default: '',
      },
      refreshHis: {
        type: Boolean,
        default: true,
      },
    },
    setup(props) {
      const tabKey = ref(props.tabKey);
      let tableData = ref([]);
      const tablePage = reactive({
        currentPage: 1,
        pageSize: 30,
        pageSizes: JE_TABLE_PAGESIZES,
        totalResult: 30,
      });
      const loading = ref(true);
      watch(
        () => props.refreshHis,
        () => {
          getHistoryData();
        },
      );

      //分页条切换页数
      const onPageChange = () => {
        getHistoryData('page');
      };
      //获得表格数据
      const getHistoryData = (type) => {
        if (type == 'page') {
          loading.value = true;
        }
        const params = {
          tableCode: 'JE_CORE_TABLETRACE',
          j_query: JSON.stringify({
            custom: [{ type: '=', code: 'TABLETRACE_RESOURCETABLE_ID', value: tabKey.value }],
            order: [{ code: 'SY_CREATETIME', type: 'desc' }],
          }),
          page: tablePage.currentPage,
          start: (tablePage.currentPage - 1) * tablePage.pageSize,
          limit: tablePage.pageSize,
        };
        getTableHistoryData(params)
          .then((data) => {
            tableData.value = data.rows;
            tablePage.totalResult = data.totalCount;
            loading.value = false;
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };
      onMounted(() => {
        getHistoryData();
      });

      //根据条件改变单元格的样式
      const cellStyle = ({ row, column }) => {
        //是否应用列
        if (column.property === 'TABLETRACE_SFYY') {
          if (row.TABLETRACE_SFYY == '1') {
            return {
              backgroundColor: '#e0ffeb',
            };
          } else {
            return {
              backgroundColor: '#faf9da',
            };
          }
        }
      };

      return {
        cellStyle,
        tablePage,
        onPageChange,
        tableData,
        loading,
      };
    },
  });
</script>
<style lang="less" scoped>
  .table-history {
    height: 100%;
    .history-table {
      height: 100%;
    }
  }
</style>
<style lang="less">
  .table-history {
    .history-table {
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
        border-right: 0 !important;
      }
      .vxe-table--render-default.border--full .vxe-body--column {
        height: 40px;
        padding: 0;
      }
      .vxe-table--render-default.border--full .vxe-header--column,
      .vxe-table--render-default.border--full .vxe-body--column {
        height: 40px;
        padding: 0;
      }
    }
  }
</style>
